<script setup>

import {onMounted, ref} from 'vue'
import request from "@/axios/request.js";
import {ElMessage} from "element-plus";

const movieList = ref([]);

// 随机获得电影列表
function getMovieList() {
  request.get('/movie/randomlist?size=10'
  ).then(res => {
    if(res.code !== 200) {
      console.log('获取电影列表失败')
      ElMessage.error('获取电影列表失败')

    }else{
      movieList.value = res.data
      console.log(movieList.value)
      console.log(res.data)
      console.log('获取电影列表成功')
    }

  })
}

onMounted(() => {
    getMovieList()
  }
)

</script>

<template>
  <h1> 主页面 </h1>
  <el-button> 换一个</el-button>
  <h2> 电影列表展示</h2>
<!--  使用for循环展示电影列表-->

  <div style="display: flex; flex-wrap: wrap;">
    <div v-for="movie in movieList" :key="movie.id">

      <el-card class="box-card" style="width: 200px; height: 300px; margin: 50px;">
        <div slot="header" class="clearfix">
          <span>{{ movie.name }}</span>
        </div>
        <div>
          <img width="100%" :src="movie.img" alt="">
        </div>
        <div>
          <label>类型：</label>
          <span>{{ movie.type }}</span>
          <label>评分：</label>
          <span>{{ movie.score }}</span>
        </div>
        {{ movie }}
      </el-card>
    </div>
    <el-card class="box-card" style="width: 200px; height: 300px; margin: 50px;">
      <el-button icon="el-icon-plus" style="display: flex; justify-content: center; align-items: center; height: 100%;">添加电影</el-button>
    </el-card>
  </div>
<!--  {{movieList}}-->
  <el-button @click="getMovieList">获取电影列表</el-button>

</template>

<style scoped>

</style>